{% extends 'index.html' %}
{% block ace-content %}
<link rel="stylesheet" href="/static/xterm/xterm.css"/>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">

    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa fa-desktop"></i>&nbsp;<code>WebSSH</code>&nbsp;<code>-</code>&nbsp;<code>{{server.ip}}</code></h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>


	<div class="row">
		<div class="col-lg-10">
			<div id="webssh_tt">
		    </div>
		</div>
	</div>
</div>



<script src="/static/xterm/xterm.js"></script>
<script src="/static/xterm/addons/fullscreen/fullscreen.js"></script>  

{% if errorInfo %}
	<script type="text/javascript"> 
		window.wxc.xcConfirm("{{errorInfo}}", window.wxc.xcConfirm.typeEnum.error);
	</script> 
{% else %}
	<script type="text/javascript">
	
	function SearchWebsshServer() {
		  // 声明变量
		  var input, filter, table, tr, td, i;
		  input = document.getElementById("websshInput");
		  filter = input.value.toUpperCase();
		  table = document.getElementById("myWebsshTable");
		  tr = table.getElementsByTagName("tr");

		  // 循环表格每一行，查找匹配项
		  for (i = 0; i < tr.length; i++) {
		    td = tr[i].getElementsByTagName("td")[0];
		    if (td) {
		      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
		        tr[i].style.display = "";
		      } else {
		        tr[i].style.display = "none";
		      }
		    } 
		  }
		}	
	
    $(document).ready(function(){           
        function make_terminal(element, size, ws_url,id) {
            var term = new Terminal({
                cols: size.cols,
                rows: size.rows,
                screenKeys: true,
                useStyle: true,
                cursorBlink: true,  // Blink the terminal's cursor
            });
            term.open(element, false);
            var ws = new WebSocket(ws_url);
            ws.onopen = function (event) {
                term.resize(term.cols, term.rows);
/*                 ws.send(JSON.stringify(["id", id,term.cols, term.rows]));  */
                term.on('data', function (data) {
                    <!--console.log(data);-->
                     ws.send(JSON.stringify(['stdin', data])); 
                });

                term.on('title', function (title) {
                    document.title = title;
                });
                ws.onmessage = function (event) {
                    json_msg = JSON.parse(event.data);
                    switch (json_msg[0]) {
                        case "stdout":
                            term.write(json_msg[1]);
                            break;
                        case "disconnect":
                            term.write("\r\n\r\n[Finished...]\r\n");
                            break;
                    }
                };
            };
            return {socket: ws, term: term};
        }

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + '/ws/webssh/{{server.id}}/';
        make_terminal(document.getElementById('webssh_tt'), {rows: 30, cols: 140}, ws_path, '{{server.id}}');
    }); // end of document ready  
</script>  

{% endif %}

{% endblock %}